<!-- 
 @Author: LW  
 @Date: 2021-01-11 13:49:57  
 @function:权限管理-岗位管理
 ----------------------------------------------------------  
 @Last Modified by: LW-2021-04-08 13:58:16  
 @Modified function:优化界面
 --> 
<template>
  <div>
    <el-card class="box-card card1">
      <div class="searchBox">
        <el-form :inline="true" :model="formSearch">
          <el-form-item label="模糊查询：">
            <el-input v-model="formSearch.parameters" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
            <el-button size="mini" type="danger" icon="el-icon-remove" @click="handleRemove()">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            ref="multipleTable"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 99%"
            :height="tableHeight"
            @selection-change="checkSelect"
            @row-click="handleRowClick"
          >
            <el-table-column align="center" type="selection" class="checkbox-inp" width="55"></el-table-column>
            <el-table-column align="center"  label="序号" width="55px">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="岗位名称" width="180"></el-table-column>
            <el-table-column align="center" prop="brevity_code" label="简码"  width="140"></el-table-column>
            <el-table-column align="center" prop="sort" label="排序" width="80"></el-table-column>
            <el-table-column align="left" header-align="center" prop="remarks" label="备注" width="280" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="is_valid" label="是否启用" width="140">
              <template slot-scope="scope">
                <el-switch
                  on-text="启用"
                  off-text="禁止"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_valid"
                  @change="forbiddenInfo(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-user"
                  size="mini"
                  class="success"
                  @click="handleUser(scope.$index, scope.row)"
                >用户</el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  class="btnBlue"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-remove"
                  size="mini"
                  class="btnRed"
                  @click="handleRemove(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
          <Pagination v-bind:child-msg="pageparm" @callFather="pageListInfo"></Pagination>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑等操作弹窗 -->
    <!-- dialog弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <component v-bind:is="curComponent" v-bind:formInfo="formInfo"  @callBack="callBack"></component>
    </el-dialog>
  </div>
</template>
<script>
//引用对象
import EditForm from "./components/edit"; //编辑
import UserForm from "./components/user"; //包含用户
import Pagination from "@/components/common/pagination"; //分页组建
import PostHttp from "@/api/authority/post"; //http
//定义变量
const {
    loadPageList, //获取分页列表信息
    forbiddenInfo, //启用或停用
    removeInfo //删除信息
} = PostHttp;
export default {
  components: {
    Pagination,
    EditForm,
    UserForm
  },
  data() {
    return {
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.795, //表格高度
      pageparm: { currentPage: 1, pageSize: 16, total: 0 }, //分页参数
      listData: [], //表格返回信息
      multipleSelection: null, //复选框
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 16,
        field: "sort",
        order: "asc",
        parameters: ""
      },
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: "", 
      },
      curComponent: null,
      formInfo: {},
    };
  },
  watch: {},
  computed: {},
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化获取列表
    this.loadList();
  },
  //事件方法执行
  methods: {
    //点击复选框触发，复选框样式的改变
    checkSelect(val) {
      this.multipleSelection = val;
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取数据方法
    loadList() {
      this.loading = true;
      loadPageList(this.formSearch).then(response => {
        let data = response.data;
        this.listData = data.Data;
        //分页赋值
        this.pageparm.currentPage = this.formSearch.page;
        this.pageparm.pageSize = this.formSearch.limit;
        this.pageparm.total = data.Count;
        this.loading = false;
      });
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage;
      this.formSearch.limit = par.pageSize;
      this.loadList();
    },
    //搜索事件
    handleSearch() {
      this.formSearch.page = 1;
      this.formSearch.limit = 16;
      this.loadList();
    },
    /////////////////////////////////////
    //新增
    handleAdd() {
      this.formInfo = {};
      this.editForm.formVisible = true;
      this.editForm.formTitle = "新增岗位信息";
      this.editForm.width = "30%";
      this.curComponent = EditForm;
    },
    //编辑界面
    handleEdit(index, row) {
      this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改岗位信息";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        this.formInfo = obj;
      }
      this.editForm.width = "30%";
      this.curComponent = EditForm;
    },
    //启用或停用
    forbiddenInfo(row) {
      let par = { postId: row.id };
      forbiddenInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.$messageTip.info(data.Msg);
          //初始化获取列表
          this.loadList();
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //删除
    handleRemove(index, row) {
      let self = this;
      if ( row != null || (this.$refs.multipleTable && this.$refs.multipleTable.store.states.selection.length > 0)
      ) {
        this.$messageTip.boxWarning("确定要删除吗?")
          .then(() => {
            let par = [];
            if (row != null) {
              par.push(row.id);
            } else {
              let selectData = self.$refs.multipleTable.store.states.selection;
              for (let index = 0; index < selectData.length; index++) {
                par.push(selectData[index].id);
              }
            }
            removeInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.loadList();
              } else {
                self.$messageTip.warning(data.Msg); 
              }
            });
          })
          .catch(() => {
            this.$messageTip.info( "已取消删除！"); 
          });
      } else {
         this.$messageTip.info( "请选择删除项！"); 
      }
    },
    //编辑操作回调
    callBack(info) {
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.loadList();
      }
    },
   /////////////////////////////////////////////////
    //包含用户管理
    handleUser(index, row) {
      //不要直接赋值，不然造成-引用类型传递
      let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
      this.formInfo = obj;
      this.editForm.formVisible = true;
      this.editForm.formTitle = "用户管理";
      this.editForm.width = "40%";
      this.curComponent = UserForm;
    },
  }
};
</script>



